<template>
  <div class="page-filter">
    <div class="page-filter-left whitespace-nowrap">
      <a-button type="primary" @click="createTemplate">新建模板</a-button>
    </div>
    <div class="page-filter-right">
      <span class="min-w-[72px]">更新时间</span>
      <a-range-picker
        v-model:value="dateList"
        :format="dateFormat"
        @change="handleDateChange"
        class="mr-[16px] w-[320px]"
      />
      <a-select
        v-model:value="templateState.publish_status"
        placeholder="全部状态"
        class="m-r-24"
        :getPopupContainer="(triggerNode: any) => triggerNode.parentNode"
        :options="PUBLISH_DATA"
      />
      <a-input
        v-model:value.trim="templateState.name"
        :maxlength="30"
        class="input-m-r-16"
        placeholder="请输入模板名称"
        @keyup.enter.native="handleSearch"
      />
      <a-button type="primary" class="m-r-8" @click="handleSearch">搜索</a-button>
      <a-button class="btn-m-r-24" @click="handleReset">重置</a-button>
      <a-tooltip placement="bottom" class="common-icon" color="#fff" :class="isModuleCheck(1)" @click="handleClickTrue">
        <template #title>
          <span class="common-icon" style="color: #5e5e5e"> 列表视图 </span>
        </template>
        <i class="iconfont icon-liebiao text-[18px]"></i>
      </a-tooltip>
      <a-tooltip placement="bottom" class="common-icon" color="#fff" :class="isListCheck(2)" @click="handleClickFalse">
        <template #title>
          <span class="common-icon" style="color: #5e5e5e"> 模块视图 </span>
        </template>
        <i class="iconfont icon-mokuai text-[18px]"></i>
      </a-tooltip>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed, ref, watch } from 'vue'
import { templateState, statusState, resetState } from '../state'
import { PUBLISH_DATA } from '../dataSource'
import { useRouter } from 'vue-router'
import type { Dayjs } from 'dayjs'
import { formatToUnix } from '@/utils/format'
type RangeValue = [Dayjs, Dayjs]
const router = useRouter()
const dateList = ref()
const dateFormat = 'YYYY/MM/DD'
const emit = defineEmits(['update-list'])
//日期
const handleDateChange = (dates: RangeValue, dateString: string[]) => {
  if (!dates) {
    templateState.start_time = undefined
    templateState.end_time = undefined
  }
  if (!dateString[0]) return (templateState.start_time = undefined)
  templateState.start_time = formatToUnix(dateString[0]).toString()
  if (!dateString[1]) return (templateState.end_time = undefined)
  templateState.end_time = formatToUnix(dateString[1]).toString()
}
const createTemplate = () => {
  router.push({ name: 'EditTemplate' })
}
const isModuleCheck = computed(() => (type: number) => {
  return statusState.isActiveModule ? 'blue-icon' : ''
})
const isListCheck = computed(() => (type: number) => {
  return statusState.isActiveModule ? '' : 'blue-icon'
})
const handleClickFalse = () => {
  statusState.isActiveModule = false
}
const handleClickTrue = () => {
  statusState.isActiveModule = true
}
const handleSearch = () => {
  console.log(templateState)
  statusState.isBySearch = true
  emit('update-list')
}
const handleReset = () => {
  resetState()
  dateList.value = []
  console.log(templateState)
  statusState.isBySearch = false
  emit('update-list')
}
//防抖
const antiShake = (time: number) => {
  return setTimeout(() => {
    console.log('防抖')
    emit('update-list')
  }, time)
}
let timer: any = null
watch(
  [() => dateList.value],
  (value) => {
    console.log('value: ', value)
    clearTimeout(timer)
    timer = antiShake(0)
  },
  { deep: true, immediate: true }
)
</script>

<style lang="less" scoped>
.iconfont {
  margin-right: 0;
}
:deep(.blue-icon) {
  border: 1px solid #0083ff !important;
  color: #0083ff;
}

.page-filter {
  display: flex;
  justify-content: space-between;
  // flex-wrap: wrap;
  align-items: center;
  margin-bottom: 16px;
  &-left {
    width: 30%;
  }
  &-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    // flex-wrap: wrap;

    .m-r-24 {
      width: 192px;
      height: 32px;
      margin-right: 24px;
    }

    .input-m-r-16 {
      width: 250px;
      height: 32px;
      margin-right: 16px;
    }

    .btn-m-r-24 {
      margin-right: 24px;
    }

    .m-r-8 {
      margin-right: 8px;
    }

    .common-icon {
      width: 36px;
      height: 31px;
      line-height: 31px;
      text-align: center;
      border: 1px solid #d9d9d9;
      background-color: #f6f6f6;
      cursor: pointer;
    }
  }
}
</style>
